<template>
    <div class="all">
        <!-- <el-calendar>
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                </p>
            </template>
        </el-calendar> -->
        <div class="block">
            <span v-if="jurisdiction.update_state === 1">
                <span class="demonstration">修改会员日</span>
                <el-date-picker
                v-model="value1"
                type="date"
                format="MM-dd"
                value-format="MM-dd"
                placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" @click="amendday">提交</el-button>
            </span>
            <span v-else></span>
            <span>当前会员日日期为:
                <span v-for="item in timeday" :key="item.id">
                    <span class="b00a f20">{{ item.member_month }}</span>月
                    <span class="b00a f20">{{ item.member_day }}</span>日
                </span>
            </span>
        </div>
        <el-calendar v-model="value">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template
                slot="dateCell"
                @click="one"
                slot-scope="{date, data}">
                <!-- <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)"> -->
                    <p> <!--这里原本有动态绑定的class，去掉-->
                        {{ data.day.split('-').slice(1).join('-') }}<br />  {{dealMyDate(data.day)}}
                    </p>
                <!-- </div> -->
            </template>
        </el-calendar>
            <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
            <!-- <div class="search">
            <el-form ref="form" :model="carWashSearch" :inline="true" size="mini">
                <el-form-item label="日期：">
                    <el-date-picker
                        v-model="carWashSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
            <el-button
                v-if="activeStatus == 0"
                size="medium"
                type="primary"
                @click="endActive()"
            >活动已开启</el-button>
            <el-button
                v-if="activeStatus == 1"
                size="medium"
                type="primary"
                @click="startActive()"
            >活动已停止</el-button>
        </div>
        <div class="table"> -->
            <!-- 表格 -->
            <!-- <el-table
                :data="carWashTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_time*1000 | formatDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="注册量" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_number }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(小汽车)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(SUV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.suv_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(MPV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mpv_num }}次</span>
                    </template>
                </el-table-column>
            </el-table> -->

            <!-- 分页 -->
            <!-- <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination> -->
        <!-- </div> -->
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
export default {
    data() {
        return {
            jurisdiction: null,
            value: new Date(),
            value1: '',
            resDate: {date:"2020-10-24",content:"会员日"},
            timeday: {member_month: "",member_day: ""}
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        amendday(){
            // console.log(this.value1.substring(0, 2))
            this.$confirm('是否继续修改会员日?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {id:1,member_month:this.value1.substring(0, 2),member_day:this.value1.substring(3, 5)}
                console.log(data)
                utils.request("/memberDay/update","post",JSON.stringify(data)).then(resp=>{
                    console.log(resp)
                    var date = new Date();
                    if(resp.data.code === 200 && resp.data.message === "信息请求成功"){
                        this.resDate.date = date.getFullYear() +"-"+  this.value1
                        this.timeday[0].member_month = this.value1.substring(0, 2)
                        this.timeday[0].member_day = this.value1.substring(3, 5)
                        // this.dealMyDate(v)
                    }
                })
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });          
            });
        },
        dealMyDate(v) {
            // console.log(v,v.isSelected)
                //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //     this.$message({
                //         type: 'success',
                //         message: '删除成功!'
                //     });
                // }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '已取消删除'
                //     });          
                // });
                // let day;
                // var date = new Date();
                // // console.log(this.timeday)
                // this.value = date .getFullYear() +"-"+ this.timeday[0].member_month +"-"+ this.timeday[0].member_day
                // if(v.isSelected){
                //     v.day !== undefined ? day = v.day : "";
                // }
                // console.log(day)
            // utils.request("/memberDay/list","post",JSON.stringify({page:1,list_rows:10})).then(resp=>{
            //     console.log(resp)
            //     this.timeday = resp.data.data.data;
            //     var date = new Date();
            //     console.log(date.getFullYear() +"-"+ resp.data.data.data[0].member_month +"-"+ resp.data.data.data[0].member_day)
            //     this.resDate[0].date = date.getFullYear() +"-"+ resp.data.data.data[0].member_month +"-"+ resp.data.data.data[0].member_day
            //     console.log(this.resDate[0].date)
            // })
            let len = this.resDate.length
            let res = ""
            // for(let i=0; i<len; i++){
                if(this.resDate.date == v) {
                    res = this.resDate.content
                    console.log(res)
                }
            // }
            return res
        },
    },
    mounted() {},
    created() {
        // 一元洗车活动的状态
        // console.log(this.value)
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/memberDay/list","post",JSON.stringify({page:1,list_rows:10})).then(resp=>{
            console.log(resp)
            this.timeday = resp.data.data.data;
            var date = new Date();
            let month = resp.data.data.data[0].member_month < 10 ? "0"+resp.data.data.data[0].member_month : resp.data.data.data[0].member_month;
            let day = resp.data.data.data[0].member_day < 10 ? "0"+resp.data.data.data[0].member_day : resp.data.data.data[0].member_day;
            console.log(date.getFullYear() +"-"+ resp.data.data.data[0].member_month +"-"+ resp.data.data.data[0].member_day)
            this.resDate.date = date.getFullYear() +"-"+ month +"-"+ day
            console.log(this.resDate.date)
        })
    },
    beforeCreate() {
        
    },
};
</script>
<style>
    .is-selected {
        color: #1989FA;
    }
    .block{
        display: flex;
        justify-content: space-between;
    }
</style>

